<template>
  <div class="mask">
    <div class="lookwhite">
      <div class="l1">通行详情</div>
      <div class="tab">
        <table>
          <tr class="te">
            <td>抓拍人脸</td>
            <td colspan="3">
              <img
                src="https://img1.baidu.com/it/u=483100178,1882406580&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=716"
                alt=""
              />
            </td>
          </tr>
        </table>
      </div>
      <div class="l1">通行人信息</div>
      <div class="tab">
        <table :v-model="form2">
          <tr>
            <td class="cu">所属项目</td>
            <td>{{ form2.item }}</td>
            <td class="cu">通行人姓名</td>
            <td>{{ form2.name }}</td>
          </tr>
          <tr>
            <td class="cu">通行人类型</td>
            <td>{{ form2.typeOfAccess }}</td>
            <td class="cu">联系电话</td>
            <td>{{ form2.tel }}</td>
          </tr>
          <tr>
            <td class="cu">通行区域</td>
            <td>{{ form2.area }}</td>
            <td class="cu">通行时间</td>
            <td></td>
          </tr>
          <tr>
            <td class="cu">通行结果</td>
            <td colspan="4">{{ form2.result }}</td>
          </tr>
        </table>
      </div>
      <hr />
      <button @click="xiaoshi2">关闭</button>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { defineComponent, ref, defineEmits, reactive, watch } from "vue";
import service from "../../../utils/service";
const emit = defineEmits<{
  (e: "xxxx"): void;
}>();
function xiaoshi2() {
  emit("xxxx");
}
interface Iform2 {
  id: string;
  item: string;
  name: string;
  typeOfAccess: string;
  tel: string;
  area: string;
  result: string;
  time: string;
}
const form2 = reactive<Iform2>({
  id: "",
  item: "",
  name: "",
  typeOfAccess: "",
  tel: "",
  area: "",
  result: "",
  time: "",
});
const props = defineProps<{
  name: string;
}>();
const defaultCheckedKeys = ref<string[]>();
// 获取管理员的信息：根据adminname进行获取
const getAdminDetail = () => {
  service({
    url: "blackWhite",
    params: {
      name: props.name,
    },
  }).then((res) => {
    let newarr: any = [];

    form2.name = res.data[0].name;
    form2.item = res.data[0].item;
    form2.typeOfAccess = res.data[0].typeOfAccess;
    form2.tel = res.data[0].tel;
    form2.area = res.data[0].area;
    form2.result = res.data[0].result;
    form2.time = res.data[0].time;
    defaultCheckedKeys.value = newarr;
  });
};
watch(
  props,
  () => {
    getAdminDetail();
  },
  {
    deep: true,
  }
);
</script>

<style scoped>
.lookwhite {
  width: 1000px;
  height: 550px;
  background-color: rgb(235, 238, 238);
  position: fixed;
  top: 150px;
  left: 400px;
  z-index: 100;
  overflow: auto;
}
.l1 {
  width: 100px;
  height: 30px;
  border-left: 4px solid green;
  margin-left: 30px;
  font-size: 18px;
  margin: 10px 30px;
}
.mask {
  /* 遮罩层的写法 */
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}
.tab {
  width: 100%;
  margin-bottom: 40px;
}
table {
  border-collapse: collapse;
  width: 800px;
  margin: auto;
  border: 2px solid rgb(173, 170, 170);
}
td {
  border: 1px solid rgb(173, 170, 170);
  width: 200px;
  height: 35px;
  text-align: center;
}
.te {
  height: 140px;
}
.cu {
  font-size: 17px;
  font-weight: bold;
}
button {
  width: 100px;
  height: 40px;
  background-color: rgb(173, 172, 172);
  border-radius: 10px;
  border: none;
  float: right;
  margin: 20px 10px 10px;
}
img {
  width: 100px;
}
</style>